<!-- 企业列表 -->
<template>
  <div
    class="firmList"
    v-loading="loading"
    element-loading-text="加载中..."
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(5,43,70, 0.8)"
  >
    <div class="main">
      <div class="flex headers">
        <input
          type="text"
          v-model.trim="searchName"
          placeholder="请输入学院名称"
        />
        <div class="search">搜索</div>
      </div>
      <div class="flex marginT-20">
        <div class="fs-20 cr-hui">某某科技大学</div>
      </div>
      <div class="listBox">
        <scroll :height="80">
          <div class="list_box">
            <!-- <div class="no-search center marginT-6" v-if="!arrLength">
            <img src="@/assets/images/laboratory/video_item1.svg" alt />
            <div class="texthui marginT-6 fs-14">没有找到该公司</div>
          </div> -->
            <ul>
              <el-collapse
                v-model="activeNames"
                accordion
                @change="changeAction"
              >
                <el-collapse-item
                  v-for="item in departmentData"
                  :key="item.facultyNo"
                  :title="item.facultyName"
                  :name="item.facultyNo"
                >
                  <template v-if="type !== 'video'">
                    <div
                      v-for="index in laboratoryByCollegeData"
                      :key="index.name"
                      :class="[
                        'item_li',
                        laboratoryNo == index.laboratoryNo && 'item_yes',
                      ]"
                      @click="linkTo(index)"
                    >
                      <img
                        src="@/assets/images/laboratory/list_s_item2.svg"
                        alt=""
                        class="item_img"
                        v-if="laboratoryNo == index.laboratoryNo"
                      />
                      <img
                        src="@/assets/images/laboratory/list_r_item2.svg"
                        alt=""
                        class="item_img"
                        v-else
                      />
                      <div class="item_name ml-8">
                        {{ index.laboratoryName }}
                      </div>
                    </div>
                  </template>
                  <template v-else>
                    <div
                      v-for="index in findFloorByUserData"
                      :key="index.id"
                      :class="[
                        'item_li',
                        floorNo == index.floorNo && 'item_yes',
                      ]"
                      @click="linkTo(index)"
                    >
                      <img
                        src="@/assets/images/laboratory/list_s_item2.svg"
                        alt=""
                        class="item_img"
                        v-if="floorNo == index.floorNo"
                      />
                      <img
                        src="@/assets/images/laboratory/list_r_item2.svg"
                        alt=""
                        class="item_img"
                        v-else
                      />
                      <div class="item_name ml-8">{{ index.floorName }}</div>
                    </div>
                  </template>
                </el-collapse-item>
              </el-collapse>
            </ul>
          </div>
        </scroll>
      </div>
    </div>
  </div>
</template>

<script>
import { getEnterpriseList } from "@/http/api";
import exportInterface from "@/utils/exportInterface.js";
import { mapGetters, mapActions, mapMutations, mapState } from "vuex";
import scroll from "@/components/scroll.vue";
export default {
  components: { scroll },
  name: "firmList",
  props: {
    open: Boolean,
  },
  data() {
    return {
      loading: false,
      exportInterface: exportInterface,
      arrLength: 0,
      searchName: "",
      activeNames: 1,
      facultyNo: "",
      laboratoryNo: "",
      floorNo: "",
      departmentData: [],
      laboratoryByCollege: [],
      laboratoryByCollegeData: [],
      findFloorByUserData: [],
      findFloorByUser: [],
      type: "",
    };
  },
  mounted() {
    this.departmentData = JSON.parse(localStorage.getItem("departmentData"));
    this.findFloorByUser = JSON.parse(
      localStorage.getItem("findFloorByUserData")
    );
    this.laboratoryByCollege = JSON.parse(
      localStorage.getItem("laboratoryByCollege")
    );
    this.linkTo({
      laboratoryNo: this.laboratoryByCollege[0].laboratoryNo,
      facultyNo: this.laboratoryByCollege[0].facultyNo,
      collegeNo: this.laboratoryByCollege[0].collegeNo,
    });
  },
  methods: {
    ...mapMutations("laboratory", [
      "setFacultyNo",
      "setLaboratoryNo",
      "setCollegeNo",
      "setFloorNo",
    ]),
    linkTo(index) {
      this.setLaboratoryNo(index.laboratoryNo);
      this.setFacultyNo(index.facultyNo);
      this.setCollegeNo(index.collegeNo);
      if (this.$router.history.current.name === "video") {
        this.setFloorNo(index.floorNo);
        this.floorNo = index.floorNo;
      } else {
        this.laboratoryNo = index.laboratoryNo;
        this.setLaboratoryNo(index.laboratoryNo);
      }
    },
    changeAction(val) {
      this.facultyNo = val;
      this.laboratoryByCollegeData = [];
      this.findFloorByUserData = [];
      this.type = this.$router.history.current.name;
      if (this.$router.history.current.name === "video") {
        this.findFloorByUserData = this.findFloorByUser.filter((item) => {
          return item.facultyNo === val;
        });
      } else {
        this.laboratoryByCollegeData = this.laboratoryByCollege.filter(
          (item) => {
            return item.facultyNo === val;
          }
        );
      }
    },
    /* 关键词搜索 */
    getSearchResult(string) {
      if (!string) {
        this.arrLength = true;
        return this.listData;
      }
      const newList = [];
      this.listData.forEach((item, i) => {
        item.router.map((item2) => {
          if (item2.name.indexOf(string) !== -1) {
            this.itemsId = item2.id;
            // this.$store.commit("home/getCompanyId", item2.id);
            // this.$store.commit("home/getDepotName", item2.name);
            newList.push(item);
          }
        });
      });
      this.arrLength = newList.length;
      return newList;
    },
  },
};
</script>

<style lang="scss" scoped>
.firmList {
  box-sizing: border-box;
  border-radius: 2px;
  padding: 24px;
  box-sizing: border-box;
  .main {
    width: 100%;
    height: 98%;
    // position: relative;
    .headers {
      width: 100%;
      height: 26px;
      padding-left: 16px;
      box-sizing: border-box;
      border: 1px solid #00bfb1;
      background-color: #fff;
      border-radius: 4px;
      display: flex;
      align-items: center;
      input {
        width: 74%;
        color: #696969;
        background-color: #fff;
      }
      .search {
        height: 100%;
        cursor: pointer;
        color: #00bfb1;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        margin-right: 16px;
      }
    }
    .headerH {
      margin: 0 !important;
    }
    .listBox {
      // position: absolute;
      // top: 110px;
      // left: 0;
      // right: 16px;
      // bottom: 28px;
      // height: 40%;
      height: 800px;
      background-color: #fff;
      border-radius: 2px;
      box-sizing: border-box;
      // overflow-y: auto;
      .list_box {
        .no-search {
          img {
            width: 20px;
            height: 20px;
          }
        }
        .item_li {
          height: 36px;
          line-height: 36px;
          box-sizing: border-box;
          color: #5f717d;
          font-size: 14px;
          cursor: pointer;
          border-left: 4px solid transparent;
          display: flex;
          justify-content: flex-start;
          align-items: center;
        }
        .item_yes {
          color: #00bfb1;
        }
        .item_img {
          width: 16px;
          height: 16px;
          margin-left: 16px;
          margin-right: 0px;
        }
        .item_name {
          overflow: hidden;
          text-overflow: ellipsis;
          // width: 100%;
          white-space: nowrap;
        }
      }
    }
  }
}
</style>